<template>
  <view class="wrapper">
    <view class="transfer">
      <view class="tip">余额将转给对方,请认真填写!</view>
      <view class="balance">您可转让余额: <text>{{ balance }}</text></view>
      <u--form
          labelPosition="left"
          :model="postForm"
          :rules="rules"
          ref="uForm"
          class="form"
          labelWidth="160rpx"
          labelAlign="right"
          :labelStyle="{'font-size': '24rpx', 'padding-right': '20rpx', 'margin-top': '-3rpx'}"
      >
        <u-form-item label="接收者ID:" prop="received_id">
          <u--input
              v-model="postForm.received_id"
              border="surround"
              fontSize="24rpx"
              :customStyle="{'height': '30rpx'}"
          ></u--input>
        </u-form-item>
        <u-form-item label="余额:" prop="amount">
          <u--input
              v-model="postForm.amount"
              border="surround"
              fontSize="24rpx"
              :customStyle="{'height': '30rpx'}"
          ></u--input>
        </u-form-item>
        <u-button :disabled="disabled" type="success" class="btn" :color="activeColor" @click="save" text="提交"></u-button>
      </u--form>
    </view>
  </view>
</template>

<script>
import color from '@/config/color.js'
import base64 from '../../util/base64'
import Service from '../../api/service'
const serviceModel = new Service()

export default {
  data() {
    return {
      activeColor: color.main_color,
      postForm: {
        received_id: '',
        amount: 0,
      },
      rules: {
        received_id: {
          type: 'number',
          required: true,
          message: '请填接收者ID, 必须是数字',
          trigger: ['blur', 'change']
        },
        amount: {
          type: 'number',
          required: true,
          min: 1,
          message: '请填写余额, 不能小于1',
          trigger: ['change']
        },
      },
      balance: 0,
      disabled: false
    }
  },
  onReady() {
    //onReady 为uni-app支持的生命周期之一
    // this.$refs.uForm.setRules(this.rules)
  },
  onLoad() {
    this.fetch()
  },
  methods: {
    fetch() {
      serviceModel.transferFetch().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.balance = data
      })
    },
    save() {
      this.$refs.uForm.validate().then(res => {
        // console.log(res)
        if (res) {
          this.disabled = true
          serviceModel.transferSave({ ...this.postForm }).then(() => {
            uni.showToast({
              icon: 'none',
              title: '操作成功',
            })
            this.fetch()
            setTimeout(() => {
              uni.navigateTo({
                url: '/sub_common/balance/index?type=2'
              })
            }, 500)
          }).finally(() => {
            setTimeout(() => {
              this.disabled = false
            }, 1000)
          })
        }
      }).catch(e => {
        // console.log(e)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  background: $background_color;
  padding: 20rpx;
  .transfer {
    padding: 20rpx;
    background: white;
    font-size: 24rpx;
    .tip {
      font-weight: 700;
      height: 30px;
    }
    .balance {
      height: 30px;
      text {
        color: red;
        margin-left: 5px;
      }
    }
    .form {
      .btn {
        margin-top: 20px;
      }
    }
  }
}
</style>
